<template>
	<scroll-view class="page-container" scroll-y @scrolltolower="scrollToLower">
		<view class="content">
			<view class="banner">
				<swiper class="swiper" :autoplay="true" :interval="3000" :circular="true">
					<swiper-item class="swiper-item" v-for="(item,index) in bannerList" :key="index">
						<image :src=" imagesUrl + item.banner_url" mode="aspectFill" class="bImg"></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="tabs padd30 between" @click="toAct" 
			style="background-image: url(https://www.baoanzulin.cn/images/act.jpg);background-size: cover;background-position: center;
			background-repeat: no-repeat;width: 99%;">
				<!-- <view v-for="(item,index) in houseType" :key="index">
					<view class="item" @click="toPageLink(item.id)" v-if="item.status == 1">
						<image class="icon" :src="imagesUrl+item.url"></image>
						<text class="txt ellipsis">{{item.name}}</text>
					</view>
				</view> -->
			</view>
			<view style="color: #747474; font-size: 24rpx;margin: 0 10rpx 10rpx 10rpx;">本小程序展示的房源图片价格等信息仅供参考。如参与本活动企业门店未提供承诺优惠，可联系协会秘书处。<br></view>
			<view class="sourse padd0_30 flex">
				<view class="dTitle">
					<view class="name between">
						<view class="hr"></view>
						<view class="txt">活动房源</view>
					</view>
				</view>
			</view>
			<view class="sourse padd30" style="padding-bottom: 0;">
				<view class="sourseList between">
					<view class="select" @click="isSelect = true">
						<picker @change="streetChange" :value="street" :range="streetArray">
							<view class="between">
								<view class="ellipsis" v-if="street==null">街道</view>
								<view class="ellipsis" v-else>{{streetArray[street]}}</view>
								<view class="triangle">{{isSelect?'&#9650;':'&#9660;'}}</view>
							</view>
						</picker>
					</view>

					<!-- <view class="select" @click="isSelect = true">
						<picker @change="rentChange" :value="rent" :range="rentArray">
							<view class="between">
								<view class="ellipsis" v-if="rent==null">租金</view>
								<view class="ellipsis" v-else>{{rentArray[rent]}}</view>
								<view class="triangle">{{isSelect?'&#9650;':'&#9660;'}}</view>
							</view>
						</picker>
					</view> -->

					<view class="select" @click="isSelect = true">
						<picker @change="businessChange" :value="business" :range="businessArray">
							<view class="between">
								<view class="ellipsis" v-if="business==null">品牌</view>
								<view class="ellipsis" v-else>{{businessArray[business]}}</view>
								<view class="triangle">{{isSelect?'&#9650;':'&#9660;'}}</view>
							</view>
						</picker>
					</view>

					<view class="select" @click="isSelect = true">
						<picker @change="houseTagChange" :value="houseTag" :range="houseTagArray">
							<view class="between">
								<view class="ellipsis" v-if="houseTag==null">特色</view>
								<view class="ellipsis" v-else>{{houseTagArray[houseTag]}}</view>
								<view class="triangle">{{isSelect?'&#9650;':'&#9660;'}}</view>
							</view>
						</picker>
					</view>
					<view class="btn" @click="reset">重置</view>
				</view>
			</view>
		</view>
		<view class="dataList padd30">
			<view class="list" v-if="dataList.length>0">
				<view class="item between" v-for="(item,index) in dataList" :key="index"
					@click="toPageLinketails(item)">
					<view style="text-align: center;font-size: 26rpx;padding-top: 5rpx;;">
						<image :src="imagesUrl + item.spare" class="hImg" mode="aspectFill"></image>
						<view style="height: 20rpx;;"></view>
						<!-- 剩余房源：{{item.start}} -->
					</view>
					<view class="info">
						<view class="name ellipsis">{{item.name}}</view>
						<view class="txt ellipsis">{{item.spare1}}</view>
						<view class="txt ellipsis">{{item.spare2}}</view>
						<view class="txt ellipsis">{{item.type}}</view>
						<view class="txt ellipsisMore line2">{{item.address}}</view>
						<view class="pirce">
							<view class="num"><text></text>{{item.price}}</view>
						</view>
						<view class="txt ellipsis">{{item.traffic}}</view>
					</view>
				</view>
			</view>
			<view class="empty" v-else>
				<view class="txt">没有更多数据～～</view>
			</view>
		</view>
	</scroll-view>
	<view class="footer">
		<navigator url="/pages/gov/gov">粤ICP备2023075427号-3</navigator>
	</view>
</template>
<style>
  .footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    font-size: 12px;
    color: #666;
  }
</style>
<script setup>
	import {
		ref,
		getCurrentInstance,
		Static,
	} from 'vue'
	import {
		onLoad,
		onShow,
		onShareAppMessage,
		onShareTimeline
	} from '@dcloudio/uni-app'
	const {
		proxy
	} = getCurrentInstance();

	const imagesUrl = proxy.$imagesUrl; //图片路径


	const addressArray = ref(['选择街道', '中国弗罗里达州', '巴西', '日本']); //街道数据 array
	const array1 = ref(['选择区间', '中国弗罗里达州', '巴西', '日本']); //街道数据 array
	const array2 = ref(['选择企业', '中国弗罗里达州', '巴西', '日本']); //街道数据 array
	const addessIndex = ref(0) //选中街道的标

	const address = ref(null) //选中街道
	const searchKey = ref(null) //输入的街道
	const isSelect = ref(false) //是否点击选择
	const dataList = ref([])
	const bannerList = ref([]) //获取 banner列表
	
	const houseType = ref([]) //获取房屋类型列表

	const street = ref(null) //街道
	const business = ref(null) //企业
	const houseTag = ref(null) //标签
	const rent = ref(null) //租金

	const streetArray = ref([])
	const businessArray = ref([])
	const houseTagArray = ref([])
	const rentArray = ref(['0-1000', '1000-1500','1500-2000', '2000-3000', '3000-5000', '5000-8000', '8000-10000', '10000以上'])

	const streetList = ref([])
	const businessList = ref([])
	const houseTagList = ref([])


	const page = ref(1) //分页
	const limit = ref(10) //数量

	function resetPage() {
		page.value = 1
	}

	let lastScrollTime = 0; // 上次滚动时间	
	function scrollToLower() {
		const now = Date.now();
		// 如果距离上次滚动时间不足一秒，则直接返回
		if (now - lastScrollTime < 1000) {
			return;
		}
		// 更新上次滚动时间
		lastScrollTime = now;
		page.value++
		getHouse()
	}

	function rentChange(e) {
		rent.value = e.detail.value
		dataList.value = []
		resetPage()
		getHouse()
	}

	function houseTagChange(e) {
		houseTag.value = e.detail.value
		dataList.value = []
		resetPage()
		getHouse()
	}

	function streetChange(e) {
		street.value = e.detail.value
		dataList.value = []
		resetPage()
		getHouse()
	}

	function businessChange(e) {
		business.value = e.detail.value
		dataList.value = []
		resetPage()
		getHouse()
	}

	function reset() {
		street.value = null //街道
		business.value = null //企业
		houseTag.value = null //标签
		rent.value = null //租金
		dataList.value = []
		
		resetPage()
		getHouse()
	}

	function getUrl() {
		let street_id = '' //街道
		let business_id = '' //企业
		let house_tag_id = '' //标签
		let price = '' //租金
		if (street.value != null) {
			for (const item of streetList.value) {
				if (item.name == streetArray.value[street.value]) {
					street_id = item.id
				}
			}
		}

		if (business.value != null) {
			for (const item of businessList.value) {
				if (item.name == businessArray.value[business.value]) {
					business_id = item.id
				}
			}
		}

		if (houseTag.value != null) {
			for (const item of houseTagList.value) {
				if (item.name == houseTagArray.value[houseTag.value]) {
					house_tag_id = item.id
				}
			}
		}

		if (rent.value != null) {
			price = rentArray.value[rent.value]
		}
		const data = {
			street_id,
			business_id,
			house_tag_id,
			price
		}
		return data

	}

	function login() {
		//用户登录获取限时5分钟的code
		uni.login({
			success: (res) => {
				proxy.$request({
					url: `${proxy.$api.getWxUserInfo}` + '?code=' + res.code,
					data: "",
					method: "POST"
				}).then(res => {
					if (res.data.user_type == 0) {
						uni.setStorageSync('USERDATA', res.data);
						uni.showModal({
							title: '填写资料获取优惠券',
							// content: '填写资料获取优惠券',
							showCancel: false, // 不显示取消按钮
							success: (res) => {
								uni.navigateTo({
									url: "/pages/enroll/index"
								})
							}
						});

					}
				});
			}
		})
	}

	//tabs 跳转
	function toPageLink(i) {
		let url = ""
		if (i == 1) {
			url = "/pages/houseList/index"
		} else if (i == 2) {
			url = "/pages/houseList/index-I"
		} else {
			url = "/pages/houseList/index-II"
		}
		uni.navigateTo({
			url: url
		})
	}

	function toPageLinketails(val) { //跳转详细
		// uni.setStorageSync('house', val);
		uni.navigateTo({
			url: '/pages/houseDetails/index?id=' + val.id
		})
	}


	//选中街道
	function bindAddressChange(e) {
		addessIndex.value = parseInt(e.detail.value)
		isSelect.value = false
	}

	//获取 banner
	function getBannerList() {
		proxy.$request({
			url: `${proxy.$api.getBanner}`,
			method: "POST"
		}).then(res => {
			bannerList.value = res.data || [];
		})
	}
	
	//获取房屋类型
	function getHouseType() {
		proxy.$request({
			url: `${proxy.$api.getHouseType}`,
			method: "POST"
		}).then(res => {
			houseType.value = res.data || [];
		})
	}

	//获取 房源列表
	function getHouse() {
		const data = getUrl()
		proxy.$request({
			url: `${proxy.$api.getHouse}`,
			method: "POST",
			data: {
				page: page.value,
				limit: limit.value,
				street_id: data.street_id,
				business_id: data.business_id,
				tags: data.house_tag_id,
				price: data.price,
				type_id:1,
			}
		}).then(res => {
			dataList.value = dataList.value.concat(res.data);
		})
	}


	function getData() {
		proxy.$request({
			url: `${proxy.$api.getBusiness}`,
			method: "POST",
		}).then(res => {
			businessArray.value = res.data.map(item => item.name);
			businessList.value = res.data
		})
		proxy.$request({
			url: `${proxy.$api.getHouseTag}`,
			method: "POST",
		}).then(res => {
			houseTagArray.value = res.data.map(item => item.name);
			houseTagList.value = res.data
		})
		proxy.$request({
			url: `${proxy.$api.getStreet}`,
			method: "POST",
		}).then(res => {
			streetArray.value = res.data.map(item => item.name);
			streetList.value = res.data
		})
	}
	
	function toAct(){
		uni.navigateTo({
			url:"/pages/index/act"
		})
	}
	
	onLoad((e) => {
		getBannerList()
		getHouseType()
		getHouse()
		getData()
		login()
	})
	onShow(() => {

	})
</script>

<style lang="less" scoped>
	.page-container {
		height: 100vh;
	}

	.content {
		width: 100%;
		background-color: #fff;

		.banner {
			width: 100%;
			height: 420rpx;
			overflow: hidden;

			.swiper {
				width: 100%;
				height: 100%;

				.swiper-item {
					width: 100%;
					height: 100%;
				}
			}

			.bImg {
				width: 100%;
				height: 100%;
				display: block;
			}
		}

		.tabs {
			width: 99%;
			margin: 20rpx 0rpx 20rpx 5rpx;
			height: 200rpx;
			border-radius: 5rpx;
			
			.item {
				width: 128rpx;
				height: 128rpx;
				border-radius: 40rpx;
				padding-top: 15rpx;

				.icon {
					width: 48rpx;
					height: 48rpx;
					margin: auto;
					margin-bottom: 15rpx;
					display: block;
				}

				.txt {
					display: block;
					text-align: center;
					color: #FFF;
					font-size: 32rpx
				}

				.active {
					font-weight: bold;
				}
			}

			.bg2 {
				background: linear-gradient(125deg, #e4a00a 0%, #f5b832 100%);
			}

			.bg3 {
				background: linear-gradient(125deg, #e4a00a 0%, #f5b832 100%);
			}
		}

		.search {
			height: 98rpx;
			border: 2rpx solid #e8e8e8;
			border-radius: 98rpx;
			padding: 0 30rpx;
			line-height: 98rpx;
			font-size: 30rpx;

			.select {
				width: 188rpx;
				overflow: hidden;

				.ellipsis {
					text-align: center;
					flex: 1;
					// padding-right: 15rpx;
				}
			}

			.searchKey {
				flex: 1;
				padding-left: 15rpx;
			}
		}

		.sourse {
			.sourseList {
				flex: 1;
				overflow: hidden;
				font-size: 26rpx;

				.btn {
					color: #666;
					font-size: 24rpx;
					width: 10%;
					overflow: hidden;
					border: 2rpx solid rgba(215, 215, 215, .2);
					text-align: center;
					border-radius: 8rpx;
					line-height: 68rpx;
				}

				.select {
					width: 25%;
					overflow: hidden;
					border: 2rpx solid rgba(215, 215, 215, .2);
					border-radius: 8rpx;
					line-height: 68rpx;
					margin: 5rpx;

					.ellipsis {
						color: #666;
						flex: 1;
						text-align: center;
						padding-right: 15rpx;
					}
				}
			}
		}
	}

	.dataList {
		background-color: #FFF;

		.list {
			.item {
				padding: 15rpx;
				border-radius: 8rpx;
				box-shadow: 0px 0px 8px 0px rgba(55, 123, 245, 0.08);
				margin-bottom: 30rpx;

				.hImg {
					width: 400rpx;
					height: 270rpx;
					display: block;
					border-radius: 8rpx;
				}

				.info {
					flex: 1;
					padding-left: 15rpx;
					overflow: hidden;

					.name {
						font-size: 32rpx;
					}

					.txt {
						color: #747474;
						font-size: 24rpx;
						margin-top: 10rpx;
					}

					.ellipsisMore {
						min-height: 70rpx;
					}

					.line2 {
						-webkit-line-clamp: 2;
					}

					.pirce {
						display: flex;
						align-items: center;
						font-size: 28rpx;

						.num {
							font-size: 32rpx;
							color: #ff6666;
							margin: 0 10rpx;

							text {
								color: black;
							}
						}
					}
				}
			}
		}
	}
</style>
